<!DOCTYPE html>
<html>
<head>
<title>HashMart安装向导</title>
	<meta charset="UTF-8" />
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="/static/js/layui/css/layui.css">
	<link rel="stylesheet" href="/static/css/install.css?<php>echo rand(1000,9999);</php>">
	<script src="/static/js/layui/layui.js"></script>
</head>
<body>

<div class="layui-header">
	<div class="layui-container">
		<h1 class="logo">
			<a href="https://hashmart.cc">
				<img class="pic" src="/static/images/logo.png" alt=""> <span style="margin-left: 10px;font-size: 22px!important;">HashMart</span></a>
		</h1>
		<div class="title">安装向导</div>
	</div>
</div>

<div class="layui-content" style="padding-top: 0px;">
	<div class="layui-container">
		<div class="layui-row">

			<div class="layui-step-group">
	            <div class="layui-step layui-active">
	                <div class="layui-sort">1</div>
	                <div class="layui-desc">检查安装环境</div>
	            </div>
	            <div class="layui-step layui-active layui-line"></div>
	            <div class="layui-step layui-active">
	                <div class="layui-sort">2</div>
	                <div class="layui-desc">创建数据库</div>
	            </div>
	            <div class="layui-step layui-active layui-line"></div>
	            <div class="layui-step layui-active ">
	                <div class="layui-sort">3</div>
	                <div class="layui-desc">安装成功</div>
	            </div>
	    	</div>

			<div class="layui-col-md12">
				<div class="layui-card layui-fixed">
					<div class="layui-card-header">
						<span>3 安装成功</span>
						<span class="layui-card-version">v1.1.0</span>
					</div>
					<div class="layui-card-body">
						<div class="layui-install">
							<div class="tips">正在安装，请稍后...</div> 	
							<div class="layui-progress layui-progress-big" lay-showPercent="true">
	  							<div class="layui-progress-bar layui-bg-blue" lay-percent=""></div>
							</div>	

							<div class="layui-install-logs"><li>创建数据表...</li></div>			
						</div>

						<div class="layui-complete" style="display: none">
							<div> <img src="/static/images/right.png" width="100px" height="100px"> </div>
							<div class="layui-success">安装成功</div>
							<!--<a href="/" target="_blank" class="layui-btn layui-btn-normal layui-btn-fixed" style="border-radius:5px !important;">访问前台</a>-->
							<a href="/backend" target="_blank" class="layui-btn layui-btn-normal layui-btn-fixed" style="border-radius:5px !important;">访问后台</a>
						</div>
		    		</div>
					</div>
				</div>
			</div>
		</div>
    </div>
</div>

<div class="layui-footer">copyright © 2023~2024 HashMart all rights reserved.</div>
</body>


<script type="text/javascript">
	layui.use(['jquery','layer','element'],function() {
		var layer = layui.layer;
		var jquery = layui.jquery;
		var element = layui.element;

		// GET安装脚本 交给任务线程处理
		jquery.get('/install.php/index/install',{},function(res){});

		// 定时检测是否安装成功
		var tasks = setInterval(function(){

			jquery.get('/install.php/index/progress',{},function(res){

				// 渲染进度条
				jquery('.layui-progress-bar').attr('lay-percent',res.progress) && element.render();

				// 查找当前元素
				var logsElem = jquery('.layui-install-logs');
				 // 插入HTML元素
				if (res.msg !== null) {

					var html = '';
					if (res.code == 200) {
						// 循环写入表数据
						for (var i in res.msg ) {
							var elem = 'layui-table-'+i;
							if (jquery('.'+elem).length === 0) {
								html += '<li class="'+ elem +'">'+res.msg[i].msg+'</li>';
							}
						}
					}
					else {
						// 销毁定时器
						html = '<li><font color="red">'+res.msg+'</font></li>';
						clearInterval(tasks);
					}

					logsElem.append(html);
				}

				if (logsElem[0].scrollHeight >= logsElem[0].clientHeight) {
					var scrollTop = logsElem[0].scrollHeight-logsElem[0].clientHeight;
					logsElem.scrollTop(scrollTop);
				}

				if (parseInt(res.progress) == 100) {

					jquery('.layui-install').remove();
					jquery('.layui-complete').show();

					// 清理安装包
					jquery.get('/install.php/index/clear',{},function(res){});
					return clearInterval(tasks);
				}
			});

		},500);
	})
</script>
</html>